<template>
  <div class="flex member-item">
    <div class="flex member-info">
      <img
        class="avatar"
        :src="member.avatar"
        title="切流"
        @click="handleCommand('change')"
      />
      <span>{{member.status.nickname||member.userName}}</span>
      <span
        v-if="member.isHost"
        class="host icon iconfont icon-host"
      />
    </div>
    <div
      v-if="isHoster&&!member.isHost"
      class="flex member-tool"
    >
      <span
        v-if="member.status.camera"
        class="icon iconfont icon-video_on"
        @click="$emit('host','video-off',member.userId)"
      />
      <span
        v-else
        class="icon iconfont icon-video_off"
        @click="$emit('host','video-on', member.userId)"
      />
      <span
        v-if="member.status.voice"
        class="icon iconfont icon-mic_on"
        @click="$emit('host','mic-off',member.userId)"
      />
      <span
        v-else
        class="icon iconfont icon-mic_off"
        @click="$emit('host','mic-on', member.userId)"
      />
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <span class="icon iconfont icon-more" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="change">
            <span class="icon iconfont icon-sort" />
            切换主流
          </el-dropdown-item> -->
          <el-dropdown-item command="switch">
            <span class="icon iconfont icon-rotation" />
            切换主持人
          </el-dropdown-item>
          <el-dropdown-item command="remove">
            <span class="icon iconfont icon-minus" />
            踢出会议室
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-if="isMe(member.userId)">
      <el-button
        size="mini"
        icon="el-icon-edit"
        type="primary"
        @click="changeNickname"
      >
        改名
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    member: {
      type: Object,
      default: () => ({})
    },
    hoster: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      userId: sessionStorage.userId
    }
  },
  computed: {
    isHoster () {
      return this.userId + '' === this.hoster + ''
    }
  },
  mounted () {
    this.userId = sessionStorage.userId
  },
  methods: {
    // 判断是否是自己
    isMe (uid) {
      return uid + '' === this.userId + ''
    },
    // 点击改名
    changeNickname () {
      this.$prompt('请输入新的昵称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$emit('host', 'nickname', this.member.userId, { nickname: value })
      })
    },
    // 下拉命令
    handleCommand (command) {
      this.$emit('host', command, this.member.userId)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.member-item {
  justify-content: space-between;
  margin: 20px 10px;
  .member-info {
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
      cursor: pointer;
    }
    .host {
      font-size: 22px;
      color: $blue;
      margin-left: 10px;
      position: relative;
      top: 3px;
    }
  }
  .member-tool {
    .icon {
      color: $white;
      cursor: pointer;
      font-size: 22px;
      margin-left: 10px;
    }
  }
}
</style>
